<!-- 	user table을 jqgrid를 이용하여 출력 
		기능 :
		1) add, edit, delete, search, refresh 등 navgrid 사용 
 		2) pager를 이용한 record, page 정보 출력      
 		3) matching table 출력 및 role multi선택 및 선택 id 값 alert출력-->
 		
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SM Team Development</title>


<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/jquery-ui-1.10.3.custom.css" />

<script src="jqgrid/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>

<style type="text/css">

#total {
	position:absolute;
	width:1550px;
	height:770px;
	z-index:1;
	top: 3px;
	left: 5px;
}

#tabmenu {
	position:absolute;
	width:1200px;
	height:80px;
	z-index:2;
	left: 150px;
	top: 10px;
	text-align:center;
}

#menu {
	position:absolute;
	width:200px;
	height:510px;
	z-index:4;
	left: 25px;
	top: 148px;
}
#body {
	position:absolute;
	width:1500px;
	height:600px;
	z-index:5;
	left: 15px;
	top: 105px;
}
#bottom {
	position:absolute;
	width:1500px;
	height:40px;
	z-index:6;
	left: 15px;
	top: 720px;
	text-align: center;
	font-family: arial;
	font-size: 13px;
}

#inner {
	position:absolute;
	width:1450px;
	height:550px;
	z-index:7;
	left: 25px;
	top: 26px;
}
#left {
	position:absolute;
	width:400px;
	height:277px;
	z-index:8;
	left: 200px;
	top: 65px;
}
#right {
	position:absolute;
	width:400px;
	height:274px;
	z-index:9;
	left: 850px;
	top: 65px;
	text-align:right;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#down {
	position:absolute;
	width:500px;
	height:32px;
	z-index:10;
	left: 195px;
	top: 420px;
}


#center {
	position:absolute;
	width:683px;
	height:389px;
	
	left: 408px;
	top: 64px;
	text-align:center;
}
</style>


<script type="text/javascript">

/*  그리드 출력 스크립트 S */ 	
	jQuery(document).ready(function(){
			jQuery("#list2").jqGrid('GridUnload');
			jQuery("#list2").jqGrid({
				url : 'user_conn.jsp',
				datatype : "json",
				colNames : [ 'UID', 'U_NAME', 'BIRTHDAY', 'TITLE' ],
				colModel : [ {
					name : 'UID',
					index : 'UID',
					width : 55,
					editable : true
				}, {
					name : 'U_NAME',
					index : 'U_NAME',
					width : 100,
					editable : true
				}, {
					name : 'BIRTHDAY',
					index : 'BIRTHDAY',
					width : 100,
					editable : true
				}, {
					name : 'TITLE',
					index : 'TITLE',
					width : 200,
					editable : true
				} ],
				onSelectRow : function(UID) {
					//alert("You double click row with id: " + UID);
					jQuery("#list3").jqGrid('setGridParam',{url:"mt_role_conn.jsp?UID="+UID});
					jQuery("#list3").jqGrid('setCaption',"Invoice Detail: "+UID).trigger('reloadGrid');
					
				},
				rowNum : 10,
				rowList : [ 10, 20, 30 ],
				rownumbers: true ,
				pager:'#pager2',
				sortname : 'UID',
				viewrecords : true,
				sortorder : "desc",
				caption : "User Table",
				loadtext: "Loading...",
				height : '100%',
				editurl : "user_edit_conn.jsp"
			});
	/*  그리드 출력 스크립트 E */
	
	/*  그리드2 출력 스크립트 S */
	jQuery("#list3").jqGrid({
						url : 'mt_role_conn.jsp',
						datatype : "json",
						colNames : [ 'MID', 'UID', 'RID' ],
						colModel : [ {
							name : 'MID',
							index : 'MID',
							width : 100,
							editable : false
						}, {
							name : 'UID',
							index : 'UID',
							width : 100,
							editable : true
						}, {
							name : 'RID',
							index : 'RID',
							width : 100,
							editable : true
						} ],
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						//pager:'#pager2',
						sortname : 'MID',
						viewrecords : true,
						sortorder : "desc",
						loadtext: "Loading...",
						caption : "JSON Example",
						height : '100%',
						setGridWidth : true,
					//editurl:"role_conn.jsp",
					});
	/*  그리드2 출력 스크립트 E */
			
	/* 로딩 텍스트 출력 및 숨김	S */	

			$('.loading').show();
			$('.loading').hide();
			
	/* 로딩 텍스트 출력 및 숨김	E */		

	
	/* navGrid 출력 S */
	
			jQuery("#list2").jqGrid(
					'navGrid',
					'#pager2',
					{
						edittext : "",
						edittitle : "Edit selected row",
						
						addtext : "",
						addtitle : "Add new row",
						
						deltext : "",
						deltitle : "Delete selected row",
						
						searchtext : "",
						searchtitle : "Find records",
						
						refreshtext : "",
						refreshtitle : "Reload Grid",
						
						alertcap : "Warning",
						alerttext : "Please, select row",
						
						viewtext : "",
						viewtitle : "View selected row"
					}, //options

					{
						editCaption : "Edit Record",
						bSubmit : "전송",
						bCancel : "취소",
						bClose : "Close",
						saveData : "Data has been changed! Save changes?",
						bYes : "Yes",
						bNo : "No",
						bExit : "Cancel",
						closeAfterEdit : true,
						reloadAfterSubmit : false
					}, // edit options

					{
						addCaption : "Add Record",
						bSubmit : "전송",
						bCancel : "취소",
						clearAfterAdd : true,
						processData : "Processing...",
						height : 280,
						closeAfterAdd : true,
						reloadAfterSubmit : false
					}, // add options

					{
						caption : "Delete",
						msg : "Delete selected record(s)?",
						bSubmit : "전송",
						bCancel : "취소",
	 				} // del options
					);
				
	
	/* navGrid 출력 E */


	/* Role list 버튼 클릭 이벤트	S */

			$("#bedata").click(function() {
					jQuery("#list4").jqGrid({
						url : 'output_test2.jsp',
						datatype : "json",
						colNames : [ 'RID', 'R_NAME', 'R_DESCRIPTION' ],
						colModel : [ {
							name : 'RID',
							index : 'RID',
							width : 90,
						}, {
							name : 'R_NAME',
							index : 'R_NAME',
							width : 100,
						}, {
							name : 'R_DESCRIPTION',
							index : 'R_DESCRIPTION',
							width : 200,
						} ],
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						sortname : 'RID',
						viewrecords : true,
						sortorder : "desc",
						loadtext: "Loading...",
						caption : "JSON Example",
						height : '100%',
						setGridWidth : true,
						multiselect:true
					});
			});
			
	/* Role list 버튼 클릭 이벤트	E */
	
	/* getID 버튼 클릭 이벤트	S */

			$("#select").click(function() {
					var ID;
										
					ID = jQuery("#list4").jqGrid('getGridParam','selarrrow');
					//alert("ID = "+ ID);
					
					
					//alert(ID);
					
					alert("ID.1="+ID[1]+"ID.0="+ID[0]);
					
					
							
					//ID.sstrlen();
			});
			
	/* getID 버튼 클릭 이벤트	E */
	
});
</script>


</head>
<body>

<!--  div태그를 이용한 layout 설정 S -->

<div id="total">


		<div id="tabmenu">
    			<c:import url="tabmenu.jsp" />
		</div>
  
		<div id="body">
				<div id="inner">
    					<div id="left">
								<table id="list2"></table>
								<div id="pager2"></div>
						</div>

						<div id="right">
	  					  <table id="list3"></table>
	  					  <br>
	  					  <table id="list4"></table>
		  				</div>
		  				
		  				
		  				<div id="down">
								<input type="button" id="bedata" value="change role" /> 
								<input type="button" id="select" value="selected role ID" />
						</div>
    			</div>
	  			<br> 
		</div>

		<div id="bottom">
				<c:import url="footer.jsp" />
		</div>
</div>

<!--  div태그를 이용한 layout 설정 E -->

</body>
</html>